.loading-center{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 32px;
    color: #888;
    background-color: rgba(0,0,0,0.2)
}
.loading-box{
    position: absolute;
    width: 33px;
    height: 33px;
    margin: auto;
    top:47%;
}
.circular{
    position: absolute;
    background-color: rgb(0, 0, 0);
    width: 8px;
    height: 8px;
    border-radius: 5px;
    animation-name: bounce_circular;
    animation-duration: 0.676s;
    animation-iteration-count: infinite;

}
.circular-1{
    left: 0;
    top:13px;
    animation-delay: 0.256s;
}
.circular-2{
    left: 3px;
    top:3px;
    animation-delay: 0.328s;
}
.circular-3{
    left: 13px;
    top:0;
    animation-delay: 0.42s;
}
.circular-4{
    right: 3px;
    top:3px;
    animation-delay: 0.512s;
}
.circular-5{
    right: 0;
    top:13px;
    animation-delay: 0.584s;
}
.circular-6{
    right: 3px;
    bottom:3px;
    animation-delay: 0.676s;
}
.circular-7{
    left: 13px;
    bottom:0;
    animation-delay: 0.748s;
}
.circular-8{
    left: 3px;
    bottom:3px;
    animation-delay: 0.84s;
}
@keyframes bounce_circular {
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(0.5);
    }
}

// scheme 2
.loader{
    background: rgba(128, 128, 128, 0.5);
}
.loadbar{
    animation: loader-fade 1s linear infinite;
    position: absolute;
    background-color: black;
    left:44.5%;
    top:37%;
    width:12%;
    height:26%;
    opacity: 0;

    border-radius: 50px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.loadbar-1{
    transform: rotate(0deg) translate(0,-142%);
    animation-delay: 0s;
}
.loadbar-1{
    transform: rotate(0deg) translate(0,-142%);
    animation-delay: 0s;
}
.loadbar-2{
    transform: rotate(30deg) translate(0,-142%);
    animation-delay: -0.9167s;
}
.loadbar-3{
    transform: rotate(60deg) translate(0,-142%);
    animation-delay: -1.8333s;
}
.loadbar-4{
    transform: rotate(90deg) translate(0,-142%);
    animation-delay: -2.75s;
}
.loadbar-5{
    transform: rotate(120deg) translate(0,-142%);
    animation-delay: -3.6667s;
}
.loadbar-6{
    transform: rotate(150deg) translate(0,-142%);
    animation-delay: -4.5833s;
}
.loadbar-7{
    transform: rotate(180deg) translate(0,-142%);
    animation-delay: -5.5s;
}
.loadbar-8{
    transform: rotate(210deg) translate(0,-142%);
    animation-delay: -6.4167s;
}
.loadbar-9{
    transform: rotate(240deg) translate(0,-142%);
    animation-delay: -7.3333s;
}
.loadbar-10{
    transform: rotate(270deg) translate(0,-142%);
    animation-delay: -8.25;
}
.loadbar-11{
    transform: rotate(300deg) translate(0,-142%);
    animation-delay: -9.1667s;
}
.loadbar-12{
    transform: rotate(330deg) translate(0,-142%);
    animation-delay: -10.0833s;
}
@keyframes loader-fade {
    from {
        opacity: 1;
    }
    to {
        opacity: 0.25;
    }
}
